<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户分布</title>
</head>
<body>
  <div id="map" style="width:98%;height: 750px;margin: 10px auto;"></div>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="china.js"></script>
<script src="//cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script>
// 用户数量
$.getJSON("china.json",function(data){
  // 初始化图表
  var map = new Highcharts.Map('map', {
    title: {
      text: '用户分布'
    },
    colorAxis: {
      min: 0,
      minColor: 'rgb(255,170,133)',
      maxColor: '#be2121'
    },
    series: [{
      data: data,
      name: '用户数量',
      mapData: Highcharts.maps['cn/china'],
      joinBy: 'name' // 根据 name 属性进行关联
    }]
  });
});
</script>
</body>
</html>
